<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:screenHeight + 'px'}]">
		<cu-custom isBack="true" bgColor="bg-gradual-blue">
			<block slot="backText">返回</block>
			<block slot="content">并条实时数据详情</block>
		</cu-custom>
		<view class="fixedtwo" :style="{top:CustomBar + 'rpx'}">
			<image style="width: 50%;height: 400rpx;" mode="scaleToFill" src="/static/images/timedataDarwingdetail.jpg"></image>
			<view class="" style="background-color: whitesmoke;width: 54%;">
				<view style="padding: 10rpx;">基础信息</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 机器型号:{{LPRCTYPE}} {{LMACHINETYPE}}
				</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 运行状态:{{tableList['当前车速'] == "0" ? "停车":"运行"}}
				</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 甲班产量:{{tableList['一班产量']}}
				</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 乙班产量:{{tableList['二班产量']}}
				</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 丙班产量:{{tableList['三班产量']}}
				</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 丁班产量:{{tableList['四班产量']}}
				</view>
				<view class="" style="height: 50rpx;line-height: 50rpx;">
					<text class="cuIcon-title text-orange "></text> 总数产量:{{tableList['总数产量']}}
				</view>
			</view>
		</view>
		<!-- <scroll-dome :list="list" :isShow="false" @jumpArchives="jumpArchives"></scroll-dome> -->
		<navTab ref="navTab" :number='2' :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
		<swiper :current="currentTab" @change="swiperTab" class="swiper" :style="{top:CustomBar + 500 + 'rpx',height:height + 'px'}">
			<swiper-item v-for="(listItem,index) in 3" :key="index">
				<scroll-view style="height: 100%;" scroll-y scroll-with-animation>
					<scroll-view style="height: 100%;" scroll-y scroll-with-animation>
						<view v-if="index == 0">
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>总数产量(10m)</view>
									<view style="text-align: center;">{{tableList['总数产量']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>当前车速(米/分)</view>
									<view style="text-align: center;">{{tableList['当前车速']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>检测重量</view>
									<view style="text-align: center;">{{tableList['检测重量']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>风机延时</view>
									<view style="text-align: center;">{{tableList['风机延时']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>标准重量</view>
									<view style="text-align: center;">{{tableList['标准重量']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>修正系数</view>
									<view style="text-align: center;">{{tableList['修正系数']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>补筒延时</view>
									<view style="text-align: center;">{{tableList['补筒延时']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>当前转速</view>
									<view style="text-align: center;">{{tableList['当前转速']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>牵伸倍数</view>
									<view style="text-align: center;">{{tableList['牵伸倍数']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>单筒定长</view>
									<view style="text-align: center;">{{tableList['单筒定长']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>当前筒长</view>
									<view style="text-align: center;">{{tableList['当前筒长']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>伺服转速</view>
									<view style="text-align: center;">{{tableList['伺服转速']}}</view>
								</view>
							</view>
						</view>
						<view v-if="index == 1">
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>甲班产量(10m)</view>
									<view style="text-align: center;">{{tableList['一班产量']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>乙班产量(10m)</view>
									<view style="text-align: center;">{{tableList['二班产量']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>丙班产量(10m)</view>
									<view style="text-align: center;">{{tableList['三班产量']}}</view>
								</view>
							</view>
							<view class="cu-form-group">
								<view class="grid col-2" style="width: 100%;color:rgb(127, 184, 178);">
									<view>丁班产量(10m)</view>
									<view style="text-align: center;">{{tableList['四班产量']}}</view>
								</view>
							</view>
						</view>
						<!-- <view v-if="index == 2">
							<t-table :top="20">
								<t-tr>
									<t-td>伺服电机转速</t-td>
									<t-td>0.0</t-td>
									<t-td>RPM</t-td>
								</t-tr>
								<t-tr>
									<t-td>脉冲指令输入频率</t-td>
									<t-td>0</t-td>
									<t-td>KHZ</t-td>
								</t-tr>
								<t-tr>
									<t-td>主回路电压</t-td>
									<t-td>555</t-td>
									<t-td>DCV</t-td>
								</t-tr>
								<t-tr>
									<t-td>负载/马代惯量比</t-td>
									<t-td>4.0</t-td>
									<t-td></t-td>
								</t-tr>
							</t-table>
						</view> -->
					</scroll-view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import navTab from '@/colorui/components/navTab.vue'
	import ScrollDome from '@/colorui/components/ScrollDome'
	import tTable from '@/colorui/components/t-table/t-table.vue';
	import tTh from '@/colorui/components/t-table/t-th.vue';
	import tTr from '@/colorui/components/t-table/t-tr.vue';
	import tTd from '@/colorui/components/t-table/t-td.vue';
	import {
		mapGetters
	} from 'vuex'
	import {
		getMinuteInfo
	} from '@/service/selectList'
	export default {
		data() {
			return {
				name: '',
				CustomBar: this.CustomBar,
				screenHeight: this.screenHeight,
				tabTitle: ['主页', '班次'], //导航栏格式
				currentTab: 0, //sweiper所在页
				tableList:'',
				deliverplan: [{
						newsList: [],
						isShow: true,
						id: '1'
					},
					{
						newsList: [],
						isShow: true,
						id: '2'
					},
					{
						newsList: [],
						isShow: true,
						id: '3'
					},
					{
						newsList: [],
						isShow: true,
						id: '4'
					},
				]
			}
		},
		components: {
			ScrollDome,
			navTab,
			tTable,
			tTh,
			tTr,
			tTd
		},
		computed: {
			...mapGetters(['Style', 'Font', 'BackGround', 'BackGroundBox']),
			height() {
				return this.screenHeight - uni.upx2px(this.CustomBar) - uni.upx2px(490)
			}
		},
		beforeDestroy() {
			this.closeSocket();
		},
		onLoad(option) {
			this.name = option.name
			this.LPRCTYPE = option.LPRCTYPE
			this.LMACHINETYPE = option.LMACHINETYPE
			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
			this.socketTask = uni.connectSocket({
				// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
				// url: "ws://192.168.31.29:8888/machine",
				url: "ws://" + uni.getStorageSync('IP').split("//")[1] + ':8888/' +
					"/machine",
				success(data) {
					console.log("websocket连接成功");
				},
			});
			// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
			// console.log( this.deliverplan[i].LMACHINENO);
			let data = {
				// "procedure": "粗纱"/
				"machine": 'BT'
				// "type": 0
			}
			this.socketTask.onOpen((res) => {
				console.log("WebSocket连接正常打开中...！");
				// this.is_open_socket = true;
				// 注：只有连接正常打开中 ，才能正常成功发送消息
				// setInterval(()=> {
				this.socketTask.send({
					data: JSON.stringify(data),
					async success() {
						console.log("消息发送成功");
					},
				});
				// },1000)
				// 注：只有连接正常打开中 ，才能正常收到消息
				this.socketTask.onMessage((res) => {
					let mydata = JSON.parse(res.data)
					console.log(mydata);
					this.tableList = mydata[this.name]
				});
			})
			// 这里仅是事件监听【如果socket关闭了会执行】
			this.socketTask.onClose(() => {
				console.log("已经被关闭了")
			});
		},
		methods: {
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				this.socketTask.close({
					success(res) {
						// this.is_open_socket = false;
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},
			changeTab(index) {
				this.currentTab = index
			},
			// swiper 滑动
			swiperTab(e) {
				var index = e.detail.current //获取索引
				console.log(index);
				if (this.tabTitle.length <= 5) {
					this.$refs.navTab.navClick(index)
				} else {
					this.$refs.navTab.longClick(index)
				}
			},
			//监听用户下拉事件
			onPullDownRefresh() {
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		}
	}
</script>

<style lang="scss">
	.fixedtwo {
		position: fixed;
		display: flex;
		left: 0px;
		width: 100%;
	
		.texttwo {
			position: absolute;
			z-index: 1;
			font-size: 40rpx;
			color: #007AFF;
			left: 30rpx;
			bottom: 30rpx;
		}
	}

	.swiper {
		position: fixed;
		width: 100%;
		left: 0px;
	}
</style>
